<template>
  <div class="app-container">
    <div class="operate-form">
      <span style="margin-left:10px;">{{ $t('ddio.thirdParty') }}：</span>
      <el-select
        v-model="thirdPartyId"
        :placeholder="$t('common.pleaseSelect')"
        style="width:150px;"
        @change="changeThirdParty"
      >
        <el-option
          v-for="item in thirdpartiesList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-input
        v-model="filterText"
        :placeholder="$t('common.filterKeyWords')"
        :maxlength="50"
        class="filter-name"
      />
    </div>

    <el-tree
      ref="tree"
      :props="deptProps"
      :data="orgs"
      node-key="orgId"
      :empty-text="$t('common.noData')"
      :filter-node-method="filterNode"
    />
    <el-dialog :title="$t('user.synchro')" :visible.sync="synchroVisible">
      <div class="synchro-form">
        <div class="synchro-item">
          <el-radio v-model="mode" label="0">{{
            $t('user.fullSync')
          }}</el-radio>
        </div>
        <div class="synchro-item">
          <el-radio v-model="mode" label="1">{{
            $t('user.incrementalSync')
          }}</el-radio>
        </div>
        <el-button
          class="synchro-btn"
          type="warning"
          @click="reloadDepartment"
        >{{ $t('ddio.syncData') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import doodApi from '@/api/ddio';
import * as settings from '@/api/settings';

export default {
  data() {
    return {
      filterText: '',
      deptProps: {
        label: 'orgName',
        children: 'children',
      },
      mode: '0',
      orgs: [],
      synchroVisible: false,
      thirdPartyId: null,
      thirdpartiesList: [],
    };
  },
  computed: {
    ...mapGetters(['isSuperman', 'doodId']),
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.getThirdpartiesList();
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.orgName.indexOf(value) !== -1;
    },
    // 获取组织机构
    async getOrganization() {
      const data = {
        thirdPartyId: this.thirdPartyId,
      };
      const res = await doodApi.getOrganization(data);
      this.orgs = res.data;
    },
    // 获取登录用户豆豆信息
    async getUserDoodOrg() {
      if (!this.doodId) {
        return null;
      }
      const param = {
        userId: this.doodId,
      };

      let doodOrg = null;
      const res = await doodApi.getDoodUser(param);
      if (res.data && res.data.length === 1) {
        const doodUser = res.data[0];
        if (doodUser.orgId) {
          const orgRes = await doodApi.getDoodOrg(doodUser.orgId);
          if (orgRes.data && orgRes.data.length === 1) {
            doodOrg = orgRes.data[0];
          }
        }
      }
      return doodOrg;
    },
    /**
     * 重新同步组织架构
     */
    async reloadDepartment() {
      const res = await doodApi.syncOrganization(Number(this.mode));
      if (res.data.code === '0') {
        await this.$message({
          message: this.$t('ddio.successReloadDepartment'),
          type: 'success',
        });
        this.controlSynchroDialog(false);
      } else {
        await this.$message({
          message: res.message,
          type: 'error',
        });
      }
    },
    /**
     * 显示/隐藏 同步模式弹窗
     * @param {Boolean} state  ture or false
     */
    controlSynchroDialog(state) {
      this.synchroVisible = state;
    },
    /**
     * 获取第三方列表
     */
    async getThirdpartiesList() {
      const res = await settings.getThirdpartiesList();
      this.thirdpartiesList = res.data;
      this.thirdPartyId = this.thirdpartiesList[0].id;
      this.getOrganization();
    },
    /**
     * 更改第三方平台 重新加载树状结构
     */
    changeThirdParty() {
      this.getOrganization();
    },
  },
};
</script>

<style scoped lang="scss">
.operate-form {
  margin-bottom: 30px;
}
.filter-name {
  display: inline-block;
  width: calc(100% - 450px);
  margin-right: 20px;
}

.synchro-form {
  margin-top: -20px;
  overflow: hidden;
  .synchro-item {
    margin: 20px 0;
    padding-left: 40px;
    span {
      display: inline-block;
      vertical-align: top;
    }
  }
  .synchro-btn {
    float: right;
  }
}
</style>
